<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="queryRef" :model="queryParams" :inline="true">
      <el-form-item prop="flowDateRange" label="时间">
        <!--        <el-radio-group v-model="radioTimeType" size="mini" class="mr20">
          <el-radio-button label="1">今日</el-radio-button>
          <el-radio-button label="2">昨日</el-radio-button>
          <el-radio-button label="3">本周</el-radio-button>
          <el-radio-button label="4">本月</el-radio-button>
          <el-radio-button label="5">自定义</el-radio-button>
        </el-radio-group> -->
		
        <el-date-picker
          v-model="flowDateArr" :shortcuts="shortcuts"
          type="daterange" value-format="YYYY-MM-DD"
          align="right"
          unlink-panels range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="changeflowDateArr"
        />
      </el-form-item>
      <el-form-item label="消费项目" prop="consumptionType">
        <el-select v-model="queryParams.consumptionType" clearable style="width: 240px" @change="handleQuery">
          <el-option label="场地消费" value="场地消费" />
          <el-option label="场地退费" value="场地退费" />
          <el-option label="会员充值" value="会员充值" />
          <el-option label="会员退款" value="会员退款" />
        </el-select>
      </el-form-item>
      <el-form-item label="订单来源" prop="orderFrom">
        <el-select
          v-model="queryParams.orderFrom"
          clearable
          style="width: 240px"
          @change="handleQuery"
        >
          <el-option label="小程序" value="小程序" />
          <el-option label="后台" value="后台" />
        </el-select>
      </el-form-item>
      <el-form-item label="支付方式" prop="payType">
        <el-select
          v-model="queryParams.payType"
          clearable
          style="width: 240px"
          @change="handleQuery"
        >
          <el-option label="扫码" value="扫码" />
          <el-option label="现金" value="现金" />
          <el-option label="余额" value="余额" />
          <el-option label="银联" value="银联" />
          <el-option label="支付宝" value="支付宝" />
          <el-option label="微信" value="微信" />
          <el-option label="其他" value="其他" />
          <el-option label="微信支付" value="微信支付" />
        </el-select>
      </el-form-item>
      <el-form-item label="类型" prop="flowType">
        <el-select
          v-model="queryParams.flowType"
          clearable
          style="width: 240px"
          @change="handleQuery"
        >
          <el-option label="消费" value="消费" />
          <el-option label="退款" value="退款" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
  
    <el-row :gutter="10" class="mb8" hidden>
      <el-col>
        <el-button
          v-hasPermi="['oam:venue:serial:export']"
          type="warning"
          plain
          icon="Download"
          @click="handleExport"
        >导出</el-button>
	  
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
    </el-row> 
    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="tableData">
      <el-table-column type="index" />
      <el-table-column label="流水号" prop="flowCode" min-width="120" />
      <el-table-column label="消费项目" prop="consumeType" min-width="120" />
      <el-table-column label="订单编号" prop="orderId" min-width="120" />
      <el-table-column label="订单来源" prop="orderFrom" min-width="120" />
      <el-table-column label="手机号" prop="phone" min-width="120" />
      <el-table-column label="类型" prop="type" min-width="120" />
      <el-table-column label="支付方式" prop="payType" min-width="120" />
      <el-table-column label="金额" prop="amount" min-width="120" />
      <el-table-column label="时间" prop="flowTime" min-width="120" />
    </el-table>
    <pagination
      v-show="total > 0"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      :total="total"
      @pagination="getList"
    />
	
	
  </div>
</template>

<script setup name="oam_venue_serial">
import { getCaptialFlowList } from '/src/api/oam/basic'
import { getCurrentInstance, ref } from 'vue'
import { onMounted, reactive } from '@vue/runtime-core'
const { proxy } = getCurrentInstance()
const total = ref(0)
const loading = ref(false)
const tableData = ref([])
const flowDateArr = ref([])
const shortcuts = [
  {
    text: '今天',
    value: new Date()
  },
  {
    text: '昨天',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return [date, date]
    }
  },
  {
    text: '本周',
    value: () => {
      const end = new Date()
      const start = new Date()
      const nows = start.getDay() || 7
      start.setTime(start.getTime() - 3600 * 1000 * 24 * ((nows - 1)))
      return [start, end]
    }  
  },
  {
    text: '本月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(1)
      return [start, end]
    }  
  }
]
const cgstatus = ref([{ value: '0', label: '冻结' }, { value: '1', label: '解冻' }])
const showSearch = ref(true)
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: undefined
  },
  rules: {
		
  }
})
const { queryParams, form, rules } = toRefs(data)
onMounted(() => {
  getList()
})
function resetQuery() {
  flowDateArr.value = []
  proxy.resetForm('queryRef')
  handleQuery()
}
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}
function getList() {
  loading.value = true
  if (flowDateArr.value) {
    queryParams.value.flowDateRange = flowDateArr.value.toString()
  }
  getCaptialFlowList(queryParams.value).then(res => {
    loading.value = false
    tableData.value = res.rows
    total.value = res.total
  })
}
function changeflowDateArr(val) {
  console.log(val)
  handleQuery()
}

</script>

<style scoped>

</style>
